import React from "react";
import { Layout } from "antd";
import ToolBarLeft from "@/layouts/components/Header/ToolBarLeft";
import ToolBarRight from "@/layouts/components/Header/ToolBarRight";
import LayoutMenu from "@/layouts/components/Menu";
import LayoutMain from "@/layouts/components/Main";
import { useShallow } from "zustand/react/shallow";
import { useMenuStore } from "@/store/menus";
import logo from "@/assets/images/logo.png";
import "./index.scss";

const { Header, Sider } = Layout;

const LayoutVertical: React.FC = () => {
  const { isCollapse } = useMenuStore(useShallow((state) => ({ isCollapse: state.isCollapse })));

  return (
    <section className="layout-vertical">
      <Sider width={224} collapsed={isCollapse}>
        <div className="logo">
          <img src={logo} alt="logo" className="logo-img" />
          {!isCollapse && <h2 className="logo-text">{import.meta.env.VITE_APP_TITLE}</h2>}
        </div>
        <LayoutMenu mode="inline" />
      </Sider>
      <Layout>
        <Header>
          <ToolBarLeft />
          <ToolBarRight />
        </Header>
        <LayoutMain />
      </Layout>
    </section>
  );
};

export default LayoutVertical;
